<ul class="breadcrumb">
  <li><a href="/">首页</a> <span class="divider">/</span></li>
  <li><a href="/tclasses">课程信息</a> <span class="divider">/</span></li>
  <li><%= link_to @tclass.title, @tclass %> <span class="divider">/</span></li>
  <li class="active"> 出勤信息</li>
</ul>
<div class="alert-message warning">
  <a class="close" href="#">×</a>
  <p> 出勤详情 应到:<span id="yds"><%= @yd %></span> 实到: <span id="sds"><%= @sd %></span></p>
</div>
<p>
</p>
<script type="text/javascript">

    isLoading = false;
    function signin(aid) {
        if (isLoading) {
            return;
        }
        isLoading = true;
        jQuery.ajax({
            url : "/attendances/signin/" + aid,
            dataType : "html",
            timeout : 1000,
            success : function(data) {
                if (data == "success") {
                    jQuery("#" + aid).removeClass("n").addClass("y").hide();
                    jQuery("table").append(jQuery("#" + aid).detach());
                    jQuery("#" + aid).show("slow");
                    jQuery("#td-" + aid).html("已签到");
                    jQuery("#tds-" + aid).html("&radic;");
                    var a = parseInt($("#sds").html()) + 1;
                    jQuery("#sds").html(a);
                } else {
                    alert("程序出错,请重试")
                }
            },
            error : function(jqXHR, textStatus, errorThrown) {
                alert("程序出错,请重试")
            },
            complete : function() {
                isLoading = false;
            }
        });
    }
    function showBZ(aid) {
        $("#bzc").val($("#tdd-" + aid + " input").val());
        $("#hid").val(aid);
        $.blockUI({
            message: $('#bz'),

            css: {
                top:        '50%',
                left:        '50%',
                textAlign:    'left',
                marginLeft:     '-320px',
                marginTop:      '-145px',
                width: '600px',
                background:'none'
            }
        });
        $('.blockOverlay').attr('title', '单击关闭').click($.unblockUI);   //遮罩层属性的设置以及当鼠标单击遮罩层可以关闭弹出层
        $('#close').click($.unblockUI);  //也可以自定义一个关闭按钮来关闭弹出层
    }
    function submitBZ() {
        if (isLoading) {
            return;
        }
        isLoading = true;
        jQuery.ajax({
            url : "/submitbz",
            dataType : "html",
            timeout : 1000,
            data : {
                id : $("#hid").val(),
                content : $("#bzc").val()
            }
            ,
            success : function(data) {
                if (data == "success") {
                    $("#tdd-" + $("#hid").val()).html($("#bzc").val());
                    $("#bzc").val("");
                    $.unblockUI();
                } else {
                    alert("程序出错,请重试")
                }
            }
            ,
            error : function(jqXHR, textStatus, errorThrown) {
                alert("程序出错,请重试")
            }
            ,
            complete : function() {
                isLoading = false;
            }
        });
    }

    $(document).ready(function() {
                $("table").tablesorter({
                    sortList: [
                        [0,0]
                    ]  ,
                    headers: { 9: { sorter: false} }
                });
            }
    );
</script>
<table class="zebra-striped bordered-table">
  <thead>
  <tr>
    <th>学号</th>
    <th>指纹</th>
    <th>年级</th>
    <th>专业</th>
    <th>姓名</th>
    <th>学校</th>
    <th>分组</th>
    <th>状态</th>
    <th>描述</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <% @attendances.each do |attendance| %>
      <tr id="<%= attendance.id %>" class="<%= {0 => "n", 1=>"y"}[attendance.state] %>">
        <td><%= attendance.student.studentId %></td>
        <td><%= attendance.student.fid %></td>
        <td><%= attendance.student.grade %></td>
        <td><%= attendance.student.major %></td>
        <td><%= attendance.student.name %></td>
        <td><%= attendance.student.university %></td>
        <td><%= attendance.student.sgroup %></td>
        <td id="tds-<%= attendance.id %>"><%= raw({0=>"&oline;&oline;", 1=>"&radic;"}[attendance.state]) %></td>
        <td id="tdd-<%= attendance.id %>"><%= truncate(attendance.description, :length=>20) %>
          <input type="hidden" value="<%= attendance.description %>"/></td>
        <td id="td-<%= attendance.id %>">
          <% if attendance.state ==0 %>
              <a style=" cursor: pointer;text-decoration: underline;" onclick="signin(<%=attendance.id%>)">签到</a>
          <% else %>
              已签到
          <% end %>
          <a style=" cursor: pointer; text-decoration: underline;" onclick="showBZ(<%=attendance.id%>)">备注</a></td>
      </tr>
  <% end %>
  </tbody>
</table>

<br/>

<div id="bz" style="width:600px; margin:0 auto; background:#fff; border:1px solid #ccc; padding:20px; display:none; -webkit-border-radius: 10px;-moz-border-radius: 10px; display:none;">
  <p align="center">
    <textarea id="bzc" rows="8" cols="55"></textarea></p>
  <input type="hidden" id="hid"/>

  <p align="center"><input type="button" onclick="submitBZ()" value="提交"/> <input type="button" id="close" value="关闭"/>
  </p>
</div>